import { DrawerDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.Drawer);

## Usage

<Demo data={DrawerDemos.usage} />

## Position

Drawer can be placed on `left` (default), `top`, `right` and `bottom`. Control drawer position with `position` prop,
for example `<Drawer position="top" />`.

<Demo data={DrawerDemos.positions} />

## Offset

Set `offset` prop to change drawer offset from the edge of the viewport:

<Demo data={DrawerDemos.offset} />

## Customize overlay

`Drawer` uses [Overlay](/core/overlay/) component, you can set any props that [Overlay](/core/overlay/)
supports with `overlayProps`:

<Demo data={DrawerDemos.overlay} />

## Sizes

You can change drawer width/height (depends on `position`) by setting `size` prop to predefined size or any valid width,
for example, `size="55%"` or `size={200}`:

```tsx
import { Drawer } from "@mantine/core";

function Demo() {
  return (
    <Drawer position="right" size="xl" opened onClose={() => {}}>
      {/* Drawer content */}
    </Drawer>
  );
}
```

<Demo data={DrawerDemos.sizes} />

## Remove header

To remove header set `withCloseButton={false}`

<Demo data={DrawerDemos.header} />

## Drawer with scroll

<Demo data={DrawerDemos.overflow} />

## Usage with ScrollArea

<Demo data={DrawerDemos.scrollarea} />

## Change transition

`Drawer` is built with [Transition](/core/transition/) component. Use `transitionProps`
prop to customize any [Transition](/core/transition/) properties:

<Demo data={DrawerDemos.transitions} />

## Initial focus

`Drawer` uses [FocusTrap](/core/focus-trap/) to trap focus. Add `data-autofocus`
attribute to the element that should receive initial focus.

<Demo data={DrawerDemos.initialFocus} />

If you do not want to focus any elements when the drawer is opened, use `FocusTrap.InitialFocus`
component to create a visually hidden element that will receive initial focus:

<Demo data={DrawerDemos.initialFocusTrap} />

If you do not add `data-autofocus` attribute and do not use `FocusTrap.InitialFocus`,
drawer will focus the first focusable element inside it which is usually the close button.

## Control behavior

The following props can be used to control `Drawer` behavior.
In most cases it is not recommended to turn these features off –
it will make the component less accessible.

- `trapFocus` – determines whether focus should be trapped inside drawer
- `closeOnEscape` – determines whether the drawer should be closed when `Escape` key is pressed
- `closeOnClickOutside` – determines whether the drawer should be closed when user clicks on the overlay
- `returnFocus` – determines whether focus should be returned to the element that was focused before the drawer was opened

## react-remove-scroll settings

`Drawer` uses [react-remove-scroll](https://github.com/theKashey/react-remove-scroll)
package to lock scroll. You can pass props down to the `RemoveScroll` component
with `removeScrollProps`:

```tsx
import { Drawer } from "@mantine/core";

function Demo() {
  return (
    <Drawer
      removeScrollProps={{ allowPinchZoom: true }}
      opened
      onClose={() => {}}
    >
      {/* Drawer content */}
    </Drawer>
  );
}
```

## Change close icon

Use `closeButtonProps` to customize close button:

<Demo data={DrawerDemos.closeIcon} />

## Compound components

You can use the following compound components to have full control over the `Drawer` rendering:

- `Drawer.Root` – context provider
- `Drawer.Overlay` – render [Overlay](/core/overlay/)
- `Drawer.Content` – main drawer element, should include all drawer content
- `Drawer.Header` – sticky header, usually contains `Drawer.Title` and `Drawer.CloseButton`
- `Drawer.Title` – `h2` element, `aria-labelledby` of `Drawer.Content` is pointing to this element, usually is rendered inside `Drawer.Header`
- `Drawer.CloseButton` – close button, usually rendered inside `Drawer.Header`
- `Drawer.Body` – a place for main content, `aria-describedby` of `Drawer.Content` is pointing to this element

<Demo data={DrawerDemos.composition} />

## Fixed elements offset

`Drawer` component uses [react-remove-scroll](https://github.com/theKashey/react-remove-scroll)
package to lock scroll. To properly size these `elements` add a `className` to them ([documentation](https://github.com/theKashey/react-remove-scroll#positionfixed-elements)):

```tsx
import { RemoveScroll } from "@mantine/core";

function Demo() {
  return (
    <>
      <div className={RemoveScroll.classNames.fullWidth}>width: 100%</div>
      <div className={RemoveScroll.classNames.zeroRight}>right: 0</div>
    </>
  );
}
```

## Accessibility

`Drawer` component follows [WAI-ARIA recommendations](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog) on accessibility.

Set `title` props to make component accessible, will add `aria-labelledby` to the content element:

```tsx
import { Drawer } from "@mantine/core";

function Demo() {
  return <Drawer title="Drawer label" opened onClose={() => {}} />;
}
```

To set close button `aria-label` use `closeButtonProps`:

```tsx
import { Drawer } from "@mantine/core";

function Demo() {
  return (
    <Drawer
      closeButtonProps={{ "aria-label": "Close modal" }}
      opened
      onClose={() => {}}
    />
  );
}
```
